<template>
  <div>
    <!-- 明信片 -->
    <ul class="menu_top_list">
      <router-link tag="li" to="/home"><span>返回</span></router-link>
      <li>个人中心</li>
      <li id="Register"></li>
    </ul>
    <div class="book_bk_qs1 my">
      <ul class="my_content">
        <li>
          <img
            src="https://rss.sfacg.com/web/account/images/avatars/app/1902/01/7a620723-560b-4da5-a8a6-447d323417dd.jpg"
            class="my_img">
        </li>
        <li>
          <span><strong>时夜MoMo桑</strong>
            等级：<i class="VIP1">VIP1</i>　　月票：0</span>
        </li>
      </ul>

    </div>

    <div class="book_bk_qs1" style="margin-top:0.1rem;padding:0 0.1rem;overflow:hidden;">
      <ul class="my_menu">
        <router-link tag="li" to="/bookshelf">
          <span class=" iconfont icon-shujia ">
          </span>我的书架
          <label class="icon-arrow-right iconfont">
          </label>
        </router-link>
        <li @click="people">
          <span class="iconfont icon-qianbao"></span>我的钱包　<i>0火券 / 0代券</i>
          <label class="icon-arrow-right iconfont"></label>
        </li>
        <li @click="Sign()"><span class="iconfont icon-shoujichongzhitianchong"></span>充值 / 消费记录
          <label class="icon-arrow-right iconfont"></label>
        </li>

        <router-link tag="li" to="/Vip">
          <span class="iconfont icon-VIP"></span>VIP专区
          <label class="icon-arrow-right iconfont"></label>

        </router-link>
        <router-link tag="li" to="/history">
          <span class="iconfont icon-lishijilu"></span>阅读历史
          <label class="icon-arrow-right iconfont"></label>

        </router-link>

      </ul>

    </div>
    <span id="Login" @click="hand"> 退出登录</span>

    <!-- <div class="title1">
     
      <div class="hstory" @click="$router.push('history')">
          <div>历史记录</div>
          <div class="right">
            <span>查看更多历史</span>
            <i class="iconfont icon-gt"></i>
          </div>
      </div>
      <div class="hstory" @click="$router.push('download')">
          <div>离线下载</div>
          <div class="right">
            <i class="iconfont icon-gt"></i>
          </div>
      </div>
      <div class="hstory" >
          <div >我的签到</div>
          <div class="right">
            <i class="iconfont icon-gt"></i>
          </div>
      </div>
      <div class="hstory" @click="setUp()">
          <div >我的设置</div>
          <div class="right">
            <i class="iconfont icon-gt"></i>
          </div>
      </div>
      <div class="hstory" @click="help()">
          <div>帮助与反馈</div>
          <div class="right">
            <i class="iconfont icon-gt"></i>
          </div>
      </div>
    
    </div>
 
     -->


  </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      login: null
    };
  },

  mounted() { },

  methods: {
    goLogin() {
      this.$router.push("/login")
    },
    //签到
    Sign() {
      Toast("该功能V3才开启")
    },
    //设置
    hand() {
      Dialog.confirm({
        title: "你不就想退出登录嘛",
        message: "行吧",
      })
        .then(() => {
          localStorage.clear("userName")

          this.$router.push('/')
        })
        .catch(() => {
          // on cancel
        });
    },
    people() {
      Toast("你没有钱")
    },

    //帮助
    help() {
      Toast("下次再帮你")
    },
    //个人中心

  },
  created() {
    this.$emit("shownavson");
    this.login = this.$store.state.login
  },
};
</script>

<style lang="scss">
.my {
  border-top-width: 0px;
  padding: 9.36px;
}

// #my {
//   .background {
//     position: relative;
//     img {
//       width: 100%;
//     }
//     //名片
//     .user {
//       position: absolute;
//       top: 50px;
//       width: 80%;
//       margin: 0 10%;
//       height: 130px;
//       border-radius: 5px;
//       box-shadow: 0px 0px  20px #e4e4e4;
//       background-color: #fff;
//       .Myname {
//         display: flex;
//         position: relative;
//         height: 50%;
//         align-items: center;
//         border-bottom: #e2e2e2 1px solid;
//         margin: 0 20px;
//         justify-content: space-between;
//         p {
//           margin-left: 100px;
//         }
//         i{
//             font-size: 20px;
//             color: #000;
//             font-weight: 600;
//         }
//         img {
//           width: 4em;
//           border-radius: 50%;
//           position: absolute;
//           top: -20%;
//         }
//       }
//       .money{
//         height: 50%;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         margin: 0 20px;
//         .money_one{
//           display: flex;
//           width: 50%;
//           svg{
//             width: 30px;
//             height: auto;
//           }
//           p{
//             padding-left: 6px;
//           }
//           p:nth-of-type(1){
//             font-size: 14px;
//           }
//           p:nth-of-type(2){
//             font-size: 12px;
//             color: #999;
//           }
//         }
//       }
//     }

//   }
//   .title{
//       padding:100px 20px 0px 20px;
//       border-bottom: 8px solid #eeecec;
//       .vip{
//         display: flex;
//         padding: 10px 0;
//         justify-content: space-between;
//         align-items: center;

//         .right{
//           display: flex;
//           align-items: center;
//           color: #999;
//           span{
//             font-size: 12px;
//           }
//           i{
//             font-size: 20px;
//           }
//         }
//       }
//     }
//   .title1{
//       padding:0px 20px 0px 20px;
//        border-bottom: 8px solid #eeecec;
//       .hstory{
//         display: flex;
//         padding: 15px 0;
//         justify-content: space-between;
//         align-items: center;
//         border-bottom:1px solid #e4e4e4 ;
//         .right{
//           display: flex;
//           align-items: center;
//           color: #999;
//           span{
//             font-size: 12px;
//           }
//           i{
//             font-size: 20px;
//           }
//         }
//       }
//     }
// }
</style>